<h1 class="caption">Data Service Container</h1>
<div class="markdown">
    <h2 class="markdown-title">Definition</h2>
    <p>
        Data service container is a lightweight prototype web system software which publish multi-source heterogeneous data resources to services in the web environment 
        and manage them. It ultimately serves geo-analysis models applications.
    </p>
</div>
<div class="markdown">
    <h2 class="markdown-title">Design Philosophy</h2>
    <p>
        The data service container is based on the philosophy of in-situ sharing of distributed data resources in the Internet.
        To break down the field barriers and promote collaborative geographic modeling and simulation research in an interdisciplinary context, by in-situ sharing of data resources maintained in respective perosonal computers, distributed institutional databases, labs around the world and so on, geo-analysis models applications will be supplied by better data resources.
        Moreover, geographic modeling and simulation will be more advanced.
    </p>
</div>
<div class="markdown">
    <h2 class="markdown-title">Functional Module</h2>
    <p>
        The data service container of geo-analysis models consist of three functional modules, including file information and visualization service.
        The container support the deployment, publication, and sharing of three types of services in the web environment.
    </p>
</div>

<div class="markdown">
    <h2 class="markdown-title">Technological Dependences</h2>
    
        <!-- <img src="./images/dataService/vuejs.png" alt="Homepage of Service Container" />
        <img src="./images/dataService/expressjs.png" alt="Homepage of Service Container" /> -->
        <img src="./images/dataService/nodejs.png" alt="Homepage of Service Container" />
        <img src="./images/dataService/mongodb.png" alt="Homepage of Service Container" />

</div>

 
<div class="markdown">
    <h2 class="markdown-title">Management Page</h2>
    <h2 class="markdown-title">Homepage</h2>
    <p>
        As is shown in Figure, Data Service Container consists of seven menu items, including Home, File, Information, Visualization, Manage, Clusters and About.
    </p>
    <figure class="pictureBox">
        <img src="./images/dataService/homePage.JPG" alt="Homepage of Service Container" />
        <figcaption>Homepage of Data Service Container</figcaption>
    </figure>
</div>
<div class="markdown">
    <h2 class="markdown-title">Services Management</h2>
    <p>
        As is shown in Figure, There are three types of services that users can provide for custom folder management.
    </p>
    <figure class="pictureBox">
        <img src="./images/dataService/file.JPG" alt="File Services" />
        <figcaption>Fig. File Services</figcaption>
    </figure>
    <figure class="pictureBox">
        <img src="./images/dataService/information.JPG" alt="Information Services" />
        <figcaption>Fig.Information Services</figcaption>
    </figure>
    <figure class="pictureBox">
        <img src="./images/dataService/visualization.JPG" alt="Visualization Services" />
        <figcaption>Fig. Visualization Services</figcaption>
    </figure>
    
</div>
<div class="markdown">
    <h2 class="markdown-title">Management</h2>
    <p>
        As is shown in Figure, user manage workspace and state.
    </p>
    <figure class="pictureBox">
        <img src="./images/dataService/workspace.JPG" alt="Model Instance List" />
        <figcaption>Fig. Workspace</figcaption>
    </figure>
    <figure class="pictureBox">
        <img src="./images/dataService/state.JPG" alt="Model Instance List" />
        <figcaption>Fig. State</figcaption>
    </figure>
</div>
<div class="markdown">
    <h2 class="markdown-title">Clusters</h2>
    <p>
        As is shown in Figure, user can check other service nodes.
    </p>
    <figure class="pictureBox">
        <img src="./images/dataService/nodes.JPG" alt="Model Instance List" />
        <figcaption>Fig. Nodes</figcaption>
    </figure>
    <figure class="pictureBox">
        <img src="./images/dataService/wold.JPG" alt="Model Instance List" />
        <figcaption>Fig. Worldwide Nodes</figcaption>
    </figure>
</div>
<div class="markdown">
    <h2 class="markdown-title">About</h2>
    <p>
        As is shown in Figure, user can check information about the system.
    </p>
    
    <figure class="pictureBox">
        <img src="./images/dataService/about.JPG" alt="Model Instance List" />
        <figcaption>Fig. Worldwide Nodes</figcaption>
    </figure>
</div>

    <h2 class="markdown-title">Service Create</h2>
    <p>
        As is shown in Figure, user can create servcies and in-situ share this service.
    </p>
    <figure class="pictureBox">
        <img src="./images/dataService/createFile.JPG" alt="Model Instance List" />
        <figcaption>Fig. Create File Service </figcaption>
    </figure>
    <figure class="pictureBox">
        <img src="./images/dataService/createInformationAndVisualization.JPG" alt="Model Instance List" />
        <figcaption>Fig. Create Information Or Visualization Service</figcaption>
    </figure>
</div>
<div class="markdown">
    <h2 class="markdown-title">Service Invoke</h2>
    <p>
        As is shown in Figure, user can invoke services.
    </p>
    <figure class="pictureBox">
        <img src="./images/dataService/informationInvoke.JPG" alt="Model Instance List" />
        <figcaption>Fig. Invoke Information Service</figcaption>
    </figure>
    <figure class="pictureBox">
        <img src="./images/dataService/invokeVisualzation.JPG" alt="Model Instance List" />
        <figcaption>Fig. Invoke Visualzation Service</figcaption>
    </figure>
    <!-- invokeVisualzation2 -->
    <figure class="pictureBox">
        <img src="./images/dataService/invokeVisualzation2.JPG" alt="Model Instance List" />
        <figcaption>Fig. Invoke Visualzation Service</figcaption>
    </figure>
</div>
<div class="markdown">

    <div class="markdown">
        <h2 class="markdown-title">Message Alert</h2>
        <p>
            As is shown in Figure, user read message.
        </p>
        
        <figure class="pictureBox">
            <img src="./images/dataService/message.JPG" alt="Model Instance List" />
            <figcaption>Fig. Message</figcaption>
        </figure>
    </div>
    <div class="markdown">